<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for 实例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-for</h1>
<hr>
<div id="app">
    <ul>
        <li v-for="item in sortItems">{{item}}</li>
    </ul>
    <hr>
    <ul>
        <li v-for="student in sortStudents">{{student.name}}-{{student.age}}</li>
    </ul>
</div>
<script type="text/javascript">
    var app = new Vue({
      el:'#app',
      data:{
        items:[10,6,33,26,78,45,37],
        students:[
          {
            name:'fesine',
            age:33
          },{
            name:'soly',
            age:28
          },{
            name:'susie',
            age:5
          },{
            name:'lexus',
            age:18
          }
        ]
      },
      computed:{
        sortItems:function () {
          var _items = this.items
          return _items.sort(sortNumber)
        },
        sortStudents:function () {
          var _students = this.students
          return sortByKey(_students,'age')

        }
      }
    })
    //自定义排序
    function sortNumber (a,b) {
      return a-b
    }
    
    function sortByKey (array,key) {
      return array.sort(function (a,b) {
        var x=a[key]
        var y=b[key]
        return x<y?-1:(x>y?1:0)

      })
      
    }
</script>
</body>
</html>